<template>
  <div class="mybox">
    <div class="content">
       <div class="header">
      <div class="header-con">
        <span class="iconfont icon-iconfontscan"></span>
      </div>
      <div class="header-right">
        <div class="header-con">
          <span class="iconfont icon-tongzhizhongxin"></span>
        </div>
        <div class="header-con"><span class="iconfont icon-shezhi"></span></div>
      </div>
    </div>
    <div class="person">
      <div class="avater"></div>
      <div @click="goReg">
        <h3>未登录</h3>
        <p>未设置签名</p>
      </div>
    </div>
    <div class="wrap">
      <ul class="reap">
        <li>
          <span>0</span>
          <p>获赞与收藏</p>
        </li>
        <li>
          <span>0</span>
          <p>粉丝</p>
        </li>
        <li>
          <span>0</span>
          <p>关注</p>
        </li>
        <li>
          <span>0</span>
          <p>动态</p>
        </li>
      </ul>
      <div class="creation">
        <div class="creation-left">创作中心</div>
        <ul class="creation-right">
          <li>
            <span class="iconfont icon-zhexiantu"></span>
            <p>数据</p>
          </li>
          <li>
            <span class="iconfont icon-huati"></span>
            <p>活动</p>
          </li>
          <li>
            <span class="iconfont icon-shouyi"></span>
            <p>收益</p>
          </li>
          <li>
            <span class="iconfont icon-pingjia"></span>
            <p>晒单</p>
          </li>
        </ul>
      </div>
      <div class="want-buy">
        <div class="want-buy-up">
          <ul>
            <li @click="goColl">
              <div>
                <span class="iconfont icon-xingxing"></span>
                <span>想要</span>
              </div>
              <div>0 ></div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-jiarugedan"></span>
                <span>我有</span>
              </div>
              <div>0 ></div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-icon-"></span>
                <span>足迹</span>
              </div>
              <div>0 ></div>
            </li>
            <li>
              <div>
                <span class="iconfont icon-dingyue"></span>
                <span>订阅</span>
              </div>
              <div>0 ></div>
            </li>
          </ul>
        </div>
        <div class="want-buy-down">
          <div>
            <p>购买</p>
            <span>0 ></span>
          </div>
          <ul class="buy-item">
            <li>
              <span class="iconfont icon-31daifukuan"></span>
              <p>待付款</p>
            </li>
            <li>
              <span class="iconfont icon-daifahuo"></span>
              <p>待发货</p>
            </li>
            <li>
              <span class="iconfont icon-daishouhuo"></span>
              <p>待收货</p>
            </li>
            <li>
              <span class="iconfont icon-tuikuanshouhou"></span>
              <p>退款售后</p>
            </li>
            <li>
              <span class="iconfont icon-tianjiaxihuan"></span>
              <p>求购</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="purse">
        <div class="purse-title">
          <p>钱包</p>
          <span>></span>
        </div>
        <ul class="purse-item">
          <li>
            <span>1</span>
            <p>优惠券</p>
          </li>
          <li>
            <span>¥0</span>
            <p>津贴</p>
          </li>
          <li>
            <span>¥0</span>
            <p>余额</p>
          </li>
          <li>
            <span>¥5万</span>
            <p>分期</p>
          </li>
          <li>
            <span>¥20万</span>
            <p>借钱</p>
          </li>
        </ul>
        <div class="discount">
          <div class="discount-left">|&nbsp;开通后30天有效</div>
          <div class="discount-right">立即领取 ></div>
        </div>
      </div>
      <div class="merchant">
        <div class="merchant-left">
          <div>
            <h3>申请个人商家</h3>
            <p>点这里 领券售好物</p>
          </div>
          <span>></span>
        </div>
        <div class="merchant-right">
          <div>
            <h3>企业/品牌商家入驻</h3>
            <p>诚邀优质商家</p>
          </div>
          <span>></span>
        </div>
      </div>
      <div class="footer-con">
        <ul>
          <li>
            <div class="icon"><span class="iconfont icon-kefu"></span></div>
            <p>客服中心</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-mendian"></span></div>
            <p>门店预约</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-3changgouchima"></span>
            </div>
            <p>尺码管理</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-youhuiquan"></span>
            </div>
            <p>天天领券</p>
          </li>
          <li>
            <div class="icon" style="font-size: 0.14rem">奇遇</div>
            <p>虚拟穿搭</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-rili"></span></div>
            <p>发售提醒</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-wenda"></span></div>
            <p>达人问答</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-xuesheng"></span></div>
            <p>学生专区</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-choujiang"></span>
            </div>
            <p>0元抽奖</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-24gl-bag"></span></div>
            <p>9元购</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-youxitubiao"></span>
            </div>
            <p>谁是鞋王</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-boxtag"></span></div>
            <p>拆盲盒</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-yingyongzhongxin"></span>
            </div>
            <p>冲关夺奖</p>
          </li>
          <li>
            <div class="icon" style="font-size: 0.14rem">焕然</div>
            <p>焕然洗护</p>
          </li>
          <li>
            <div class="icon" style="font-size: 0.14rem">95</div>
            <p>高价回收</p>
          </li>
          <li>
            <div class="icon"><span class="iconfont icon-yinzhang"></span></div>
            <p>鉴别服务</p>
          </li>
          <li>
            <div class="icon">
              <span class="iconfont icon-shiyongwendang"></span>
            </div>
            <p>竞拍中心</p>
          </li>
        </ul>
      </div>
    </div>
      <div>
    </div>
   
      <Homefooter/>
    </div>
  </div>
</template>

<script>
import Homefooter from '../components/homeFooter.vue'
export default {
  name: "My",
  components: { 
    Homefooter
  },
  methods: {
    goReg(){
      this.$router.push("./Login")
    },
     goColl(){
      this.$router.push("./Collection")
    }
  },
};
</script>

<style scoped>
@import url("../assets/iconfonts/iconfont.css");
.header {
  width: 100%;
  height: 0.73rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 10;
}
.content{
   margin-bottom: 0.5rem;
}
.header-right {
  display: flex;
}

.header-con {
  width: 0.37rem;
  font-size: 0.17rem;
  text-align: center;
  line-height: 0.4rem;
}

.person {
  height: 0.64rem;
  /* padding: 0.11rem 0.12rem 0 0.19rem; */
  padding: 0 00.14rem ;
  display: flex;
  margin-top: 0.73rem;
}

.person .avater {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background-color: #d9d9d9;
  color: #fff;
}

.person h3 {
  font-size: 0.14rem;
  font-weight: normal;
  margin: 0.1rem 0 0 0.11rem;
}

.person p {
  font-size: 0.1rem;
  margin: 0 0 0.18rem 0.07rem;
  color: #6d6c74;
}

.wrap {
  padding: 0 0.12rem;
  background-color: #fafafc;
}

.reap {
  width: 100%;
  height: 0.42rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.reap li {
  width: 25%;
}

.reap span {
  font-size: 0.12rem;
  margin: 0.13rem 0 0.05rem;
}

.reap p {
  font-size: 0.1rem;
  color: #97969b;
}

.creation {
  width: 100%;
  height: 0.6rem;
  background-color: #fff;
  display: flex;
  margin-bottom: 0.07rem;
}

.creation .creation-left {
  width: 0.59rem;
  height: 0.4rem;
  border-right: solid 2px #fafafa;
  padding: 0 0.14rem;
  margin: 0.1rem 0;
  font-size: 0.14rem;
  font-weight: bold;
}

.creation .creation-right {
  width: 2.79rem;
  padding: 0.13rem 0 0.11rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.creation .creation-right li {
  width: 25%;
  color: #9d9da0;
}

.creation .creation-right li p {
  font-size: 0.1rem;
}

.want-buy {
  background-color: #fff;
  margin-bottom: 0.07rem;
}
.want-buy-up ul {
  width: 100%;
  height: 0.93rem;
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px #fbfbfb;
}

.want-buy-up ul li {
  width: 40%;
  height: 0.46rem;
  display: flex;
  justify-content: space-between;
  line-height: 0.46rem;
  text-align: center;
  padding: 0 0.14rem;
}

.want-buy-up ul li span {
  margin-right: 0.05rem;
}

.want-buy-up ul li div:last-child {
  font-size: 0.1rem;
  color: #828187;
}

.want-buy-down div {
  /* height: 0.47rem; */
  padding: 0.17rem 0.11rem 0.17rem 0.11rem;
  font-size: 0.13rem;
  display: flex;
  justify-content: space-between;
}

.want-buy-down div span {
  font-size: 0.1rem;
  color: #828187;
}

.want-buy-down .buy-item {
  height: 0.52rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.want-buy-down .buy-item p {
  font-size: 0.1rem;
  color: #85848c;
  margin-top: 0.11rem;
}

.purse {
  background-color: #fff;
  padding: 0 0.11rem 0.15rem;
  margin-bottom: 0.07rem;
}
.purse .purse-title {
  /* height: 0.47rem; */
  padding: 0.17rem 0 0.17rem;
  font-size: 0.13rem;
  display: flex;
  justify-content: space-between;
}

.purse .purse-title span {
  font-size: 0.1rem;
  color: #828187;
}
.purse-item {
  width: 100%;
  height: 0.42rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.purse-item li {
  width: 20%;
}

.purse-item span {
  font-size: 0.12rem;
  margin: 0.11rem 0 0.09rem;
}

.purse-item p {
  font-size: 0.1rem;
  color: #97969b;
}

.discount {
  height: 0.29rem;
  line-height: 00.29rem;
  background-color: #f9f9fb;
  padding: 0.06rem 0.15rem 0 0.1rem;
  display: flex;
  justify-content: space-between;
  /* background-image: url(../assets/img/1.png); */
  background-repeat: no-repeat;
  background-position: 0.1rem;
  background-size: 0.39rem 0.13rem;
  font-size: 0.1rem;
  /* margin-top: 0.09rem; */
}

.discount-left {
  height: 0.14rem;
  margin-left: 0.56rem;
  padding-left: 0.06rem;
  /* border-left: solid 1px; */
}

.merchant {
  height: 0.65rem;
  margin-bottom: 0.07rem;
  background-color: #fff;
  display: flex;
}
.merchant-left,
.merchant-right {
  width: 50%;
  padding: 0.18rem 0.14rem 0.17rem 0.11rem;
  display: flex;
  justify-content: space-between;
}

.merchant h3 {
  font-size: 0.12rem;
  font-weight: bold;
}

.merchant p {
  font-size: 0.1rem;
  color: #a5a3ae;
  margin-top: 0.08rem;
}

.merchant span {
  font-size: 0.1rem;
  color: #a5a3ae;
  line-height: 0.3rem;
}

.footer-con {
  /* height: 1.06rem; */
  /* padding: 0.18rem 0 0.15rem 0; */
  margin-bottom: 0.14rem;
  background-color: #fff;
}

.footer-con ul {
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  overflow: auto;
  white-space: nowrap;
}

.footer-con ul li {
  width: 0.39rem;
  margin: 0 0.14rem;
}

.footer-con ul li .icon {
  width: 0.33rem;
  height: 0.33rem;
  border-radius: 50%;
  background-color: #f5f4f7;
  font-size: 0.19rem;
  line-height: 0.33rem;
  margin-left: 0.06rem;
}

.footer-con ul li p {
  font-size: 0.1rem;
  color: #7f7f8e;
  margin-top: 0.1rem;
}
</style>